<template>
	<div class="app">
	<div class="top">
		<div class="img1"></div>
		 <router-link tag="div" class="tab-item" to="/xia">
		<div class="frame1">
			
			<input type="text"placeholder="当前位置" />
			
		</div>
		 </router-link>
	</div>
	<div class="buttom">
		<div class="img2"></div>
		 <router-link tag="div" class="tab-item" to="/xia">
			<div class="frame2">
				<input type="text"placeholder="请输入终点" />
			</div>
			 </router-link>
	</div>
      
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	.app{
		width: 90%;
		height: 20%;
		background: white;
		position: fixed;
		top: 11vh;
		left: 5%;
		border: 1px solid #f1f1f1;
		border-radius: 5px;
		background: url(../../assets/images/22-51-55.png) no-repeat;
		background-position-x: 90%;
		background-position-y: 50%;
	}
	.top{
		width: 70%;
		height: 50%;
		background:white;
		border: none;
	}
	.img1{
		width: 30%;
		height: 100%;
		background: url(../../assets/images/images/22-52-25_01.png) no-repeat;
		background-position-x:50% ;
		background-position-y: 50%;
		float: left;
	}
	.frame1{
		width: 70%;
		height: 100%;
		border-bottom: 2px solid #e3e3e3;
		float: left;
	}
	.buttom{
		width: 70%;
		height: 50%;
		background: white;
		border: none;
	}
	.img2{
		width: 30%;
		height: 100%;
		background: url(../../assets/images/images/22-52-25_02.png) no-repeat;
		background-position-x:50% ;
		background-position-y: 50%;
		float: left;
	}
	.tab-item{
		width: 70%;
		height: 100%;
		float: left;
	}
	.frame2{
		width: 70%;
		height: 100%;		
		float: left;
	}
	input{
		width: 100%;
		height: 100%;
		border: none;
	}
	
</style>